<template>
	<view>
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">业务员升级</block>
		</cu-custom>

		<view class="userinfo">
			<view class="user">
				<view class="info">
					<text>{{ userInfo.nickname }}</text>
					<view class="vip">
						<text class="viptext">{{ userVip.name }}</text>
					</view>
				</view>
			</view>
			<view class="tip">
				<text v-if="!userVip.vip_time">根据各自需要选择开通商家、业务员或者区县代理！</text>
				<text v-else>你的业务员将于{{ userVip.vip_time }}到期哦！</text>
			</view>
		</view>

		<view class="card">
			<swiper class="swiper" :current="id" next-margin="40rpx" previous-margin="40rpx" @change="changeSwiper">
				<swiper-item v-for="(item, index) in list" :key="index">
					<view class="vip-card">
						<view class="head">
							<text>{{ item.name }}</text>
						</view>
						<view class="cont">
							<view class="item-wrapper">
								<view class="item" @click="selopen(item)">
									<view class="item-cont">
										<text>￥{{ item.price }}</text>
									</view>
								</view>
							</view>

							<view class="padding-sm">
								<radio-group @change="radioChange">
									<label v-for="payItem in items" :key="payItem.value"
										class="uni-list-cell uni-list-cell-pd">
										<view class="uni-list-cell-item" style="margin-top:10rpx;">
											<radio :value="payItem.value" :checked="payItem.value === form.pay_type" />
											<text style="padding-left:10rpx;">{{ payItem.name }}</text>
										</view>
									</label>
								</radio-group>
							</view>

							<view class="add-form">
								<div v-for="field in formFields" :key="field.name" class="uni-form-item">
									<label class="title">{{ field.label }}</label>
									<input v-if="!field.isArea" class="uni-input" v-model="form[field.name]"
										:placeholder="field.placeholder" :readonly="false" :disabled="false" />
									<yhdslplace v-else @change="change">
										<div class="place" :style="{ color: place ? 'black' : 'grey' }">
											{{ place || '所在地区' }}
										</div>
									</yhdslplace>
								</div>

								<button @click="openVip(item.price)">立即购买</button>
							</view>



							<!-- <view class="action-button">
								<button class="bg-gradual-orange" @click="openVip(item.price)">立即开通</button>
							</view> -->
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	var wx = require('jweixin-module');
	// #endif
	
	// #ifdef APP
	import wx from 'weixin-js-sdk'
	// #endif
	const isWechat = () => {
		return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
	}
	import yhdslplace from "@/components/yhdsl-place/yhdsl-place.vue";
	import shop from "@/api/shop";
	import {
		mapActions,
		mapState
	} from "vuex";

	export default {
		components: {
			yhdslplace
		},
		data() {
			return {
				place: "",
				id: 0,
				form: {
					name: "",
					phone: "",
					region: ["北京市", "北京市", "东城区"],
					detail: "",
					pay_type: 2,
				},
				formFields: [{
						name: "name",
						label: "收货人",
						placeholder: "请输入收货人"
					},
					{
						name: "phone",
						label: "手机号码",
						placeholder: "请输入手机号码"
					},
					{
						name: "region",
						label: "所在地区",
						isArea: true
					},
					{
						name: "detail",
						label: "详细地址",
						placeholder: "如道路 门牌号 小区等"
					},
				],
				items: [{
						name: "微信支付",
						value: 1
					},
					{
						name: "余额支付",
						value: 2
					},
				],
				userVip: {
					vip_id: 2,
					vip_time: 0,
					name: "业务员"
				},
				list: [{
						id: "2",
						name: "业务员",
						price: 199
					},
					{
						id: "1",
						name: "商家",
						price: 298
					},
					{
						id: "3",
						name: "区县代理",
						price: 36500
					},
				],
			};
		},
		computed: {
			...mapState(["userInfo"]),
		},
		onLoad(e) {
			this.getWechatCode()
		},
		methods: {
			getWechatCode() {
				if (isWechat) {
					let appid = "wx06785591c04f8c56"; //微信APPid
					let code = this.getUrlCode().code; //是否存在code
					let local = window.location.href;
					if (code == null || code === "") {
						//不存在就打开上面的地址进行授权
						window.location.href =
							"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
							appid +
							"&redirect_uri=" +
							encodeURIComponent(local) +
							"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
					} else {
						this.code = code;
						// alert(this.code)
						this.getCode()
					}
				}
			},
			async getCode() {
				shop.getOpenid({
					code: this.code
				}).then(res => {
					if (res.code == 1) {
						this.disabled = true;
						this.loading = false;
						// this.toast(res.msg);
						// window.location.href = res.data
						// this.status = res.msg;
						console.log('添加成功');
						// this.goBack();
					} else {
						this.loading = false
						// this.toast(res.msg);
					}
				})
			},
			getUrlCode() {
				// 截取url中的code方法
				var url = location.search;
				console.log(url)
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
					}
				}
				console.log(theRequest);
				return theRequest;
			},
			changeSwiper() {

			},
			change(val) {
				this.form.region = val.data;
				this.place = val.data.join(",");
			},
			radioChange(evt) {
				this.form.pay_type = evt.target.value;
			},
			openVip(price) {
				if (!this.form.name || !this.form.phone || !this.form.detail) {
					return uni.showToast({
						title: "请填写完整信息",
						icon: "none"
					});
				}
				this.form.amount = price;
				shop.userlevel(this.form).then((res) => {
					if (res.code === 0) {
						return uni.showToast({
							title: res.msg
						});
					}
					if (this.form.pay_type == 2) {
						uni.showModal({
							title: "恭喜您升级成功"
						});
					} else {
						this.handlePayment(res.data.pay);
					}

				});
			},
			handlePayment(wxpay) {
				wx.config({
					appId: "wx06785591c04f8c56",
					timestamp: wxpay.timeStamp,
					nonceStr: wxpay.nonceStr,
					signature: wxpay.paySign,
					jsApiList: ["chooseWXPay"],
				});
				wx.ready(() => {
					wx.chooseWXPay({
						timestamp: wxpay.timeStamp,
						nonceStr: wxpay.nonceStr,
						package: wxpay.package,
						signType: "MD5",
						paySign: wxpay.paySign,
						success: () => {
							uni.showModal({
								title: "恭喜您升级成功"
							});
							setTimeout(() => uni.switchTab({
								url: "/pages/my/index"
							}), 2000);
						},
						fail: () => uni.showToast({
							title: "支付失败",
							icon: "none"
						}),
					});
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.add-form {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		padding: 20rpx;
		background-color: #f9f9f9;
		border-radius: 20rpx;
		margin: 20rpx;

		.uni-form-item {
			display: flex;
			flex-direction: column;
			gap: 10rpx;

			.title {
				font-size: 28rpx;
				font-weight: 600;
				color: #333;
			}

			.uni-input {
				font-size: 30rpx;
				border: 1px solid #e0e0e0;
				border-radius: 10rpx;
				background-color: white;
				width: 100%;
				height: 80rpx;
				/* 根据需要调整高度 */
				padding: 10rpx;
				/* 确保内边距不会撑开内容 */
				box-sizing: border-box;
				/* 避免 padding 改变整体高度 */
			}


			.place {
				padding: 15rpx;
				font-size: 30rpx;
				border: 1px solid #e0e0e0;
				border-radius: 10rpx;
				background-color: white;
				text-align: center;
			}
		}

		button {
			width: 100%;
			margin-top: 20rpx;
			padding: 15rpx;
			background-color: #ff9900;
			color: white;
			border: none;
			border-radius: 10rpx;
			font-size: 32rpx;
			font-weight: 600;
			text-align: center;

			&:active {
				background-color: #e68a00;
			}
		}
	}
</style>

<style lang="scss" scoped>
	.userinfo {
		display: flex;
		flex-direction: column;
		background-color: white;
		padding: 20rpx;
		margin: 30rpx 20rpx;
		border-radius: 20rpx;

		.user {
			display: flex;
			align-items: center;

			.info {
				margin-left: 20rpx;
				font-weight: 600;
				font-size: 32rpx;

				.vip {
					display: flex;
					margin-top: 15rpx;

					.viptext {
						margin-left: 10rpx;
						color: #333;
					}
				}
			}
		}

		.tip {
			font-size: 28rpx;
			color: #666;
			margin: 20rpx;
		}
	}

	.card {
		.swiper {
			height: 1500rpx;

			.vip-card {
				margin: 10rpx;
				background-color: white;
				border-radius: 20rpx;

				.head {
					background-color: #ff9900;
					padding: 20rpx;
					color: white;
					font-size: 32rpx;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
				}

				.cont {
					padding: 20rpx;

					.item-wrapper {
						display: flex;
						justify-content: center;
						margin: 20rpx 0;

						.item-cont {
							text-align: center;
							font-size: 35rpx;
						}
					}

					.padding-sm {
						display: flex;
						justify-content: center;
					}

					.action-button {
						margin: 30rpx 0;
						text-align: center;

						button {
							width: 300rpx;
						}
					}
				}
			}
		}
	}
</style>